<template>
  <div class='all'>
    <a-card :title='title' :bordered="false" style="width: 100%;">
      <div :id="id" class="main" ref='echarts'></div>
    </a-card>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')			//饼图
  //下面的是需要的提示框
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/toolbox')
  require('echarts/lib/component/grid')
  require('echarts/lib/component/legend')


  export default {
    name: 'reportLineChart',
    props:{
      title:String,
      dataXList:Array,
      dataYListOne:Array,
      dataYListTwo:Array,
      id:String
    },
    mounted() {
      this.triggering();
    },
    watch:{
      dataXList() {
        this.triggering();
      },
      dataYListOne() {
        this.triggering();
      },
      dataYListTwo() {
        this.triggering();
      }
    },
    methods:{
      triggering(){
        var myChart = echarts.init(this.$refs.echarts);
        var option;

        option = {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            x: "5%",
            y: "7%",
            width: "82%",
            height: "79%"
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.dataXList
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [
            {
              type: 'line',
              data: this.dataYListOne
            },
            {
              type: 'line',
              data: this.dataYListTwo,
            }
          ]
        };
        option && myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>
  .title{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    margin-left: 20px;
  }
  .main{
    width: 100%;
    height: 275px;
    margin-left: -2%;
  }
</style>